<template>
  <div class="api-test">
    <header>
      <i class="fa fa-angle-left" @click="$router.go(-1)"></i>
      <span>API调试测试</span>
    </header>
    
    <div class="test-section">
      <h3>商家排序API测试</h3>
      
      <div class="button-group">
        <button @click="testSortByRating" :disabled="loading">按评分排序</button>
        <button @click="testSortByDistance" :disabled="loading">按距离排序</button>
        <button @click="testSortBySales" :disabled="loading">按销量排序</button>
        <button @click="testDirectAPI" :disabled="loading">直接API调用</button>
      </div>

      <div class="loading" v-if="loading">测试中...</div>
    
      <div class="result-section" v-if="result">
        <h4>测试结果:</h4>
        <div class="result-info">
          <p><strong>请求状态:</strong> {{ result.status }}</p>
          <p><strong>数据类型:</strong> {{ result.dataType }}</p>
          <p><strong>数据长度:</strong> {{ result.dataLength }}</p>
          <p><strong>请求时间:</strong> {{ result.timestamp }}</p>
    </div>
    
        <div class="data-preview" v-if="result.data && result.data.length > 0">
          <h4>数据预览 (前3个商家):</h4>
          <div class="business-preview" v-for="(business, index) in result.data.slice(0, 3)" :key="index">
            <h5>商家 {{ index + 1 }}</h5>
            <ul>
              <li><strong>ID:</strong> {{ business.businessId }}</li>
              <li><strong>名称:</strong> {{ business.businessName }}</li>
              <li><strong>地址:</strong> {{ business.businessAddress }}</li>
              <li><strong>介绍:</strong> {{ business.businessExplain }}</li>
              <li><strong>起送价:</strong> ¥{{ business.starPrice }}</li>
              <li><strong>配送费:</strong> ¥{{ business.deliveryPrice }}</li>
              <li><strong>距离:</strong> {{ business.distance }}km</li>
              <li><strong>月销量:</strong> {{ business.monthlySales }}单</li>
              <li><strong>评分:</strong> {{ business.rating }}分</li>
            </ul>
      </div>
    </div>
    
        <div class="raw-data" v-if="showRawData">
          <h4>原始数据:</h4>
          <pre>{{ JSON.stringify(result.rawData, null, 2) }}</pre>
        </div>
        
        <button @click="showRawData = !showRawData" class="toggle-btn">
          {{ showRawData ? '隐藏' : '显示' }}原始数据
        </button>
      </div>

      <div class="error-section" v-if="error">
        <h4>错误信息:</h4>
        <p class="error-message">{{ error }}</p>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, inject } from 'vue'
import { businessApi } from '../api/index.js'

const axios = inject('axios')

const loading = ref(false)
const result = ref(null)
const error = ref('')
const showRawData = ref(false)

const testAPI = async (sortType, method = 'api') => {
  loading.value = true
  error.value = ''
  result.value = null
  
  try {
    console.log(`=== 开始测试${sortType}排序 (${method}方法) ===`)
  
    let response
    const startTime = Date.now()
    
    if (method === 'api') {
      // 使用封装的API方法
      response = await businessApi.getBusinessListBySort(sortType)
    } else if (method === 'direct') {
      // 直接使用axios调用
      response = await axios.get(`/api/BusinessController/listBusinessBySort?sortType=${sortType}`)
    }
    
    const endTime = Date.now()
    const duration = endTime - startTime
    
    console.log('API响应:', response)
    console.log('响应时长:', duration + 'ms')
    
    result.value = {
      status: 'success',
      dataType: Array.isArray(response) ? 'Array' : typeof response,
      dataLength: Array.isArray(response) ? response.length : 'N/A',
      timestamp: new Date().toLocaleString(),
      duration: duration + 'ms',
      data: Array.isArray(response) ? response : [],
      rawData: response
    }
    
    if (Array.isArray(response) && response.length > 0) {
      console.log('第一个商家数据:', response[0])
    }
    
  } catch (err) {
    console.error('API测试失败:', err)
    error.value = err.message || '请求失败'
    result.value = {
      status: 'error',
      timestamp: new Date().toLocaleString(),
      rawData: err
    }
  } finally {
    loading.value = false
  }
}

const testSortByRating = () => testAPI('rating')
const testSortByDistance = () => testAPI('distance') 
const testSortBySales = () => testAPI('sales')
const testDirectAPI = () => testAPI('rating', 'direct')
</script>

<style scoped>
.api-test {
  width: 100%;
  min-height: 100vh;
  background-color: #f5f5f5;
  padding-bottom: 20px;
}

header {
  width: 100%;
  height: 50px;
  background-color: #0097ff;
  color: #fff;
  font-size: 18px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1000;
  display: flex;
  justify-content: center;
  align-items: center;
}

header i {
  font-size: 24px;
  position: absolute;
  left: 15px;
  cursor: pointer;
}

.test-section {
  margin-top: 60px;
  background: white;
  padding: 20px;
  margin: 60px 10px 10px 10px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.test-section h3 {
  margin-top: 0;
  color: #333;
  font-size: 18px;
  margin-bottom: 20px;
}

.button-group {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.button-group button {
  padding: 10px 15px;
  background-color: #0097ff;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
}

.button-group button:disabled {
  background-color: #ccc;
  cursor: not-allowed;
}

.button-group button:hover:not(:disabled) {
  background-color: #0077cc;
}

.loading {
  text-align: center;
  color: #666;
  font-size: 14px;
  padding: 20px;
}

.result-section, .error-section {
  margin-top: 20px;
}

.result-section h4, .error-section h4 {
  color: #333;
  margin-bottom: 10px;
}

.result-info {
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 15px;
}

.result-info p {
  margin: 5px 0;
  font-size: 14px;
}

.data-preview {
  margin-top: 15px;
}

.business-preview {
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 5px;
  margin-bottom: 10px;
  border-left: 4px solid #0097ff;
}

.business-preview h5 {
  margin: 0 0 10px 0;
  color: #0097ff;
}

.business-preview ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.business-preview li {
  padding: 3px 0;
  font-size: 13px;
  border-bottom: 1px solid #eee;
}

.raw-data {
  margin-top: 15px;
}

.raw-data pre {
  background-color: #f8f9fa;
  padding: 15px;
  border-radius: 5px;
  overflow-x: auto;
  font-size: 12px;
  white-space: pre-wrap;
  word-wrap: break-word;
}

.toggle-btn {
  background-color: #28a745;
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  cursor: pointer;
  margin-top: 10px;
}

.toggle-btn:hover {
  background-color: #218838;
}

.error-message {
  color: #dc3545;
  background-color: #f8d7da;
  padding: 10px;
  border-radius: 5px;
  font-size: 14px;
}
</style>